<template>
  <div class="container">
    <!-- 头部一行开始 -->
    <div class="nav">
      <h2>2024,我们一起重新出发</h2>
      <div
        @click="showPop"
        style="font-size: 33px"
        class="iconfont icon-gengduo"
      ></div>
    </div>
    <!-- 弹出层 -->
    <van-popup
      v-model:show="show"
      position="left"
      :style="{ width: '70%', height: '100%' }"
    />
    <!-- 头部第二行开始 -->
    <div class="navbar">
      <ul>
        <li><a href="#">笔记</a></li>
        <li><a href="#">日记</a></li>
        <li><a href="#">朝花夕拾</a></li>
        <li><a href="#">随想</a></li>
      </ul>
    </div>
    <!-- 头部第二行结束 -->

    <div class="banner">
      <ul>
        <li>
          <span style="font-size: 23px" class="iconfont icon-html5"></span>

          HtML&CSS
        </li>
        <li>
          <span style="font-size: 23px" class="iconfont icon-js1"></span>

          JavaScript
        </li>
        <li>
          <span style="font-size: 23px" class="iconfont icon-vue"></span>

          Vue.js
        </li>
        <li>
          <span style="font-size: 23px" class="iconfont icon-xingqiu"></span>

          计算机网络
        </li>
        <li>
          <span style="font-size: 23px" class="iconfont icon-database"></span>

          数据库MySQL
        </li>
      </ul>
      <ul>
        <li>
          <span style="font-size: 23px" class="iconfont icon-HarmonyOS"></span>

          HarmonyOS
        </li>
        <li>
          <span style="font-size: 23px" class="iconfont icon-uisheji"></span>
          UI设计
        </li>
        <li>
          <span style="font-size: 23px" class="iconfont icon-uni-app"></span>
          Uniapp
        </li>
        <li>
          <span
            style="font-size: 23px"
            class="iconfont icon-weixinxiaochengxu"
          ></span>
          微信小程序
        </li>
        <li>
          <span style="font-size: 23px" class="iconfont icon-node"></span>

          Node
        </li>
      </ul>
      <!-- <van-image
        radius="10"
  width="100%"
  height="100%"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/> -->
    </div>

    <!-- banner结束 -->
    <div class="list">
      <div class="leftbox">
        <img src="../assets/pinia.svg" alt="" />
      </div>
      <div class="rightbox">
        <p class="p">
          怎么才能提高打字速度，用什dawdawasd粉丝人非人FESRWER31发的无法为热风发纷纷为热么打字软件呢？
        </p>

        <div class="boxbottom">
          <div class="img">
            <img src="../assets/100.jpg" alt="" />
            <div style="padding-left: 5px">
              <p>小明</p>
            </div>
            <div style="padding-left: 5px">
              <p>2024-9-21</p>
            </div>
          </div>

          <span style="font-size: 23px" class="iconfont icon-dianzan"></span>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="leftbox">
        <img src="../assets/100.jpg" alt="" />
      </div>
      <div class="rightbox">
        <p class="p">怎么才能提高打字速度，用什么打字软件呢？</p>

        <div class="boxbottom">
          <div class="img">
            <img src="../assets/100.jpg" alt="" />
          </div>

          <p>小明</p>
          <p>2024-9-21</p>

          <span style="font-size: 23px" class="iconfont icon-dianzan"></span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="leftbox">
        <img src="../assets/100.jpg" alt="" />
      </div>
      <div class="rightbox">
        <p class="p">怎么才能提高打字速度，用什么打字软件呢？</p>

        <div class="boxbottom">
          <div class="img">
            <img src="../assets/100.jpg" alt="" />
          </div>
          <p>小明</p>
          <p>2024-9-21</p>

          <span style="font-size: 23px" class="iconfont icon-dianzan"></span>
        </div>
      </div>
    </div>

    <!-- <div class="list">
      <div class="leftbox">
        <img src="../assets/100.jpg" alt="" />
      </div>
      <div class="rightbox">
        <p class="p">怎么才能提高打字速度，用什么打字软件呢？</p>

        <div class="boxbottom">
          <div class="img">
            <img src="../assets/100.jpg" alt="" />
          </div>

          <p>小明</p>
          <p>2024-9-21</p>

          <span style="font-size: 23px" class="iconfont icon-dianzan"></span>
        </div>
      </div>
    </div> -->
    <div class="article-list">
      <article-list></article-list>
    </div>

    <!-- 底部导航栏 -->
  </div>
</template>

<script setup>
import ArticleList from '@/views/ArticleList.vue'
import { ref } from 'vue'
const show = ref(false)
const showPop = () => {
  show.value = !show.value
}
</script>

<style scoped>
.container {
  padding: 1.3rem;
}
@font-face {
  font-family: 'PangMenZhengDao';
  src: url('@/assets/Pang.ttf') format('truetype');
}
/* 字体旁门 */

h2 {
  font-family: 'PangMenZhengDao', Arial, sans-serif;
  font-size: 20px;
  color: #333;
  margin: 0 auto;
  text-align: center;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav .icon-gengduo {
  font-size: 40px;
}
/*头部一行结束  */

.navbar ul {
  height: 45px;
  display: flex;
  padding: 0;
  margin-top: 10px;
  justify-content: space-around;
  align-items: center;
  /* background-color: #f8f8f8; */
  text-decoration: none;
  list-style: none;
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
}
.navbar ul li a {
  height: 100%;
  display: block;
  height: 45px;
  line-height: 45px;

  text-decoration: none;
  list-style: none;
  font-size: 16px;
  color: #333;
}
.navbar ul li a:hover {
  border-bottom: 1px solid #007bff;
  color: #007bff;
}
.banner {
  margin-top: 5px;
  display: flex;
  width: 100%;
  height: 170px;
  /* background-color: #007bff; */
  /* background: url(../assets/100.jpg) no-repeat center;
    background-size: cover; */
}
.banner ul {
  width: 80%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: gray;
  padding: 0;
  margin: 0;
  border-radius: 10px;
}
.banner ul:nth-child(2) {
}
.banner ul li {
  font-size: 14px;
  padding: 5px;

  display: inline;
}
.banner ul li:hover {
  color: #007bff;
}

.banner img {
  background-color: #ccc;
  width: 100%;
  height: 100px;
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin: 0;
  height: 120px;
  border-bottom: 1px solid #ccc;

  /* background-color: pink; */
}
.list .rightbox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 65%;
  height: 105px;

  /* background-color: #ccc; */
}
.list .rightbox .p {
  padding-top: 10px;
  padding-left: 10px;
  margin: 0;
  font-size: 14px;
  font-family: '微软雅黑';
  margin-bottom: 4;
  text-indent: 2em;
  /* 让文字不超过3行 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.list .rightbox .boxbottom {
  padding-left: 4px;
  padding-top: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
}
.list .rightbox .boxbottom .img {
  width: 70% !important;
  display: flex;
  justify-content: start;
  align-items: center;

  /* padding-left: 14px;
    padding-top: 14px; */
}
.list .rightbox .boxbottom img {
  height: 30px;
  width: 30px;

  border-radius: 50%;
}
.list .rightbox .boxbottom p {
  font-size: 12px;
  color: #333;
  margin: 0;
}

.list .leftbox {
  display: flex;
  justify-content: center;
  width: 33%;

  height: 120px;
}
.list .leftbox img {
  border-radius: 10px;
  margin-top: 10px;
  max-width: 100%;
  height: 100px;
}

/* 设置滚动 */
.article-list {
  /* overflow-y: auto; 
  height: 30vh; */
  padding-bottom: 50px;
}

/* 底部导航栏样式 */
.bottomNav {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  /* border-top: 1px solid #ccc; */
  padding: 5px 0;
  text-align: center;
}
.bottomNav a {
  text-decoration: none;
  color: #000;
}
.bottomNav a:hover {
  color: #007bff;
}
</style>
